<template>
  <view class="my">
   <div class="h1-box"><h1 class="h1">不只前端  </h1><zero-loading type="eyes" class="lod"  position="absolute"></zero-loading></div>
   <h2 class="h2">不积跬步无以至千里！</h2>
   <p class="h3">信息</p>
    <view class="xx">
      <p class="mg"><span class="tit">座右铭: </span>不忘初心，方得始终！</p>
      <p class="mg"><span class="tit">微信号: </span>caolei520-</p>
      <p class="mg"><span class="tit">QQ: </span>363444533</p>
      <p class="mg"><span class="tit">CSDN: </span>WA终结者</p>
      <p class="mg"><span class="tit">网页博客:</span><text  user-selec="true" class="fz">363444533.github.io</text></p>
    </view>
    <view class="fei">
      <zero-loading type="gear" class="fei-load" position="absolute"></zero-loading>
      <span class="ttt"> 起风了，努力活下去！</span>
      <zero-loading type="gear" class="fei-load1" position="absolute"></zero-loading>
       <image style="margin-top: 5px;" src="https://mp-8f25c430-0372-4755-96cf-2bd45756f60a.cdn.bspapp.com/cloudstorage/fca987ee-5b66-4a80-a5e8-077c581840a2.jpg" mode="widthFix"></image>
    </view>
    <view class="footer">
      <view class="fot"></view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // loading:'true'
      };
    }
  }
</script>

<style lang="scss">
  .my{
    position: relative;
    padding: 20px 10px 0;
    .h1-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .h1{
        position: relative;
        font-size: 22px;
        font-weight: bold;
        display: inline-block;
                width: 150px;
                height: 32px;
                line-height: 32px;
                padding-left: 15px;
                background: #50BFFF;
                left: -8px;
                color: #FFF;
                   &:before {
                            content: "";
                            position: absolute;
                            height: 0;
                            width: 0;
                            border-bottom: 8px solid #4396c5;
                            border-left: 8px solid transparent;
                            top: -8px;
                            left: 0;
                        }
                
                        &:after {
                            content: "";
                            position: absolute;
                            height: 0;
                            width: 0;
                            border-top: 15px solid transparent;
                            border-bottom: 15px solid transparent;
                            border-left: 8px solid #50BFFF;
                            right: -8px;
                        }
        
      }
      .lod{
        position: absolute;
        right: 50px;
        top: 35px;
      }
    }
    
    .h2{
      font-size: 18px;
      font-weight: bold;
      margin: 20px 0px;
        border-left: 3px solid #ccc;
        padding-left: 3px;
         font-style:oblique;
    }
    .h3{
      font-size: 20px;
      font-weight: bold;
    }
    .xx{
      font-size: 16px;
      .mg{
        margin: 8px 3px;
      }
      .fz{
        text-decoration: underline;
        color: #558;
      }
      .tit{
        font-weight: bold;
        margin-right: 5px;
      }
    }
   .ttt{
      color: #97acf8e8;
         font-size: 20px;
         -webkit-animation: shining 0.5s alternate infinite;
         animation: shining 0.5s alternate infinite;
   }
   @-webkit-keyframes shining {
       from {
           text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;
       }
   
       to {
           text-shadow: 0 0 2px lightblue, 0 0 5px lightblue, 0 0 7px lightblue, 0 0 10px skyblue, 0 0 12px skyblue, 0 0 15px skyblue;
       }
   }
    .fei{
      position: relative;
      text-align: center;
      margin-top: 50px;
      font-size: 18px;
      .fei-load{
        position: absolute;
        left: 30px;
      }
      .fei-load1{
        position: absolute;
        right: 30px;
      }
    }
  }



.my {
    align-items: center;
    min-height: calc(100vh - 20px);
    background-color: rgb(118, 218, 255);
    overflow: hidden;
    z-index: -1;
    &:before, &:after {
      z-index: -1;
        content: "";
        position: absolute;
        left: 50%;
        min-width: 300vw;
        min-height: 300vw;
        background-color: #fff;
        animation-name: rotate;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    &:before {
        bottom: 5vh;
        border-radius: 40%;
        animation-duration: 7s;
    }

    &:after {
        bottom: 5vh;
        opacity: .5;
        border-radius: 40%;
        animation-duration: 7s;
    }
}

@keyframes rotate {
    0% {
    transform: translate(-50%, 0) rotateZ(0deg);
    }
    50% {
    transform: translate(-50%, -2%) rotateZ(180deg);
    }
    100% {
    transform: translate(-50%, 0%) rotateZ(360deg);
    }
}
</style>
